<template>
  <div class="profile-introduce" v-if="article">
    <div class="container">
      <!-- 
        <div class="profile-title">
        <h3>公司介绍</h3>
      </div> 
      -->
      <!-- <div
        class="profile-content wp-block-post-content"
        v-html="article.content.rendered"
      ></div> -->
      <div class="profile-content" style="">
        <iframe
          id="articleIframe"
          style="width: 100%"
          scrolling="no"
          frameborder="0"
          :src="wordPressArticleUrl"
        >
        </iframe>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleById } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "ProfileIndex",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      article: { title: "", content: { rendered: "" } },
      wordPressArticleUrl: "/wordpress/archives/77",
    });
    const refData = toRefs(data);
    onBeforeMount(async () => {
      await methods.getDetail();
    });
    onMounted(() => {
      var iframeObj = document.getElementById("articleIframe");
      iframeObj.onload = function () {
        proxy.$iframeAutoFit(iframeObj);
      };
    });
    //
    const methods = {
      //
      goBack() {
        proxy.$router.go(-1);
      },
      async getDetail() {
        await getArticleById(77).then((res) => {
          data.article = res.data;
        });
      },
    };

    return {
      ...refData,
    };
  },
};
</script>
<style lang="scss" scoped>
.profile-introduce {
  padding: 100px 0;

  .profile-title {
    margin-top: 50px;
  }

  .profile-content {
    // margin-top: 50px;
  }
}
</style>
